<template>
    <div id="myHeader">
        <div id="imgdiv"><img src="../assets/images/dian5.jpg" alt="" id="imglogo"></div>
        <div id="title">Welcome to 海底捞鱼的奇幻之旅</div>
        <div id="head_msg">
            <span>您好：</span>
            <span>{{name}}</span>
            <span>（{{role}}）</span>
            <button @click="out" id="loginout">退 出</button>
        </div>
    </div>
</template>

<script>
    import {mapActions,mapGetters} from 'vuex'
    export default {
        name: "Header",
        data(){
            return{
               name:this.$store.state.user.userName,
               role:this.$store.state.user.userRole
            }
        },
        computed:{
            /*...mapGetters(['getType']),
            quanxian(){

                //console.log(this.$store.state.user.type)

                // console.log(this.$store.state.user.type)

                if(this.$store.state.user.type==='boss'){
                    return '老板'
                }else if(this.$store.state.user.type==='leader'){
                    return '管理'
                }else if(this.$store.state.user.type==='user'){
                    return '员工'
                }
            }*/
        },
        methods:{
            ...mapActions(['loginOut']),
            out(){
                this.loginOut()
                this.$router.push('/login')
            }
        }
    }
</script>

<style scoped lang="less">
#head_msg{
    float: right;
    #loginout{
        float: right;
        margin-left: 20px;
    }
}
</style>
